<template>
  <div
      style="display: flex;position:relative;justify-content: space-between;height: 1rem;align-items: center;color: #fff">
    <!--头部虚化背景图-->
    <img style="height: 11rem;width: 100%;position: absolute;z-index: -1;filter: blur(15px)" :src="canshu.coverImgUrl">
    <div>
      <van-icon size="0.8rem" name="arrow-left" @click="$router.push('/')"/>
      <span style="font-size: 0.4rem">歌单</span>
    </div>
    <div>
      <van-icon size="0.8rem" name="search"/>
      <van-icon size="0.8rem" name="wap-nav"/>
    </div>
  </div>
  <div style="display: flex;padding: 0 0.5rem">
    <img style="height: 3rem;width: 3rem;border-radius: 0.3rem" :src="canshu.coverImgUrl">
    <div>
      <span
          style="display:inline-block;width:4rem;font-size: 0.3rem;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">{{
          canshu.description
        }}</span>
      <br/>
      <img style="height: 1rem;width: 1rem;border-radius: 50%" :src="this.avatarUrl">
      <span style="color: #fff">{{ this.nickname }}</span>
      <br/>
      <br/>
      <span>{{ canshu.name }}</span>
    </div>
  </div>
  <van-row style="text-align: center;color: #fff;margin-top: .5rem">
    <van-col span="6">
      <div>
        <div>
          <van-icon name="more-o" size="0.8rem"/>
        </div>
        <span>{{ canshu.commentCount }}</span>
      </div>
    </van-col>
    <van-col span="6">
      <div>
        <van-icon name="link-o" size="0.8rem"/>
      </div>
      <span>{{ canshu.shareCount }}</span>
    </van-col>
    <van-col span="6">
      <div>
        <van-icon name="down" size="0.8rem"/>
      </div>
      <span>下载</span>
    </van-col>
    <van-col span="6">
      <div>
        <van-icon name="certificate" size="0.8rem"/>
      </div>
      <span>多选</span>
    </van-col>
  </van-row>
</template>

<script>
export default {
  name: "ItemMusicTop",
  data() {
    return {
      // 父组件传来的对象
      myCanShu: {},
      // 声明两个变量接受watch中的值
      avatarUrl: '',
      nickname: '',
    }
  },
  props: {
    //
    canshu: {
      type: Object
    }
  },
  mounted() {
    // 无效，结果为undefined
    // this.dayin()
  },
  methods: {
    dayin() {
      console.log(this.myCanShu.creator)
    }
  },
  watch: {
    'canshu.creator.avatarUrl'(newValue) {
      this.avatarUrl = newValue
    },
    'canshu.creator.nickname'(newValue) {
      this.nickname = newValue
    },
    // 打印props的初始值
    'canshu'(val) {
      this.myCanShu = val
      // this.dayin()
    }
  }

}
</script>

<style scoped>

</style>